<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page,index) of pages" :key="index">
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content" :src="item.imgUrl" alt="">
					</div>
					<p class="icon-desc">{{item.iconDesc}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
			<!-- <swiper-slide>
				<div class="icon">
					<div class="icon-img">
						<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="">
					</div>
					<p class="icon-desc">景点门票</p>
				</div>
			</swiper-slide> -->
			<!-- <swiper-slide>
				<div class="icon">
					<div class="icon-img">
						<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" alt="">
					</div>
					<p class="icon-desc">一日游</p>
				</div>
			</swiper-slide> -->
		</swiper>
		<!-- <div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png" alt="">
			</div>
			<p class="icon-desc">亲自乐园</p>
		</div>
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" alt="">
			</div>
			<p class="icon-desc">踏青赏花</p>
		</div>
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png" alt="">
			</div>
			<p class="icon-desc">名胜古迹</p>
		</div>
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png" alt="">
			</div>
			<p class="icon-desc">六一特惠</p>
		</div>
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png" alt="">
			</div>
			<p class="icon-desc">当地好玩</p>
		</div>
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/87/a6521252870ea402.png" alt="">
			</div>
			<p class="icon-desc">学生专享</p>
		</div> -->
	</div>
</template>
<script>
export default{
	name:"HomeIcons",
	data(){
		return {
			swiperOption: {
	  			pagination: '.swiper-pagination',
	  			loop:true
  			},
			iconList:[
				{id:'001',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',iconDesc:'景点门票'},
				{id:'002',imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',iconDesc:'一日游'},
				{id:'003',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',iconDesc:'亲子乐园'},
				{id:'004',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',iconDesc:'踏青赏花'},
				{id:'005',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',iconDesc:'名胜古迹'},
				{id:'006',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png',iconDesc:'六一特惠'},
				{id:'007',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png',iconDesc:'当地好玩'},
				{id:'008',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/87/a6521252870ea402.png',iconDesc:'学生专享'},
				{id:'009',imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png',iconDesc:'当地好玩'}
			]
		}
	},
	computed: {
		pages () {
			const pages=[]
			this.iconList.forEach((item,index) => {
				const page=Math.floor(index / 8)
				if(!pages[page]){
					pages[page]=[]
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>
<style scoped lang="stylus">
	@import '~style/varibles.styl'
	@import '~style/mixins.styl'
	.icons>>>.swiper-pagination-bullet-active
	  background: #f00 !important	
	.icons>>>.swiper-container
	  height:0
	  padding-bottom:50%
	.icon
	  width:25%
	  float:left
	  height:0
	  padding-bottom:25%
	  overflow:hidden
	  position:relative
	.icon-img
	  position:absolute
	  top:0
	  left:0
	  right:0
	  bottom:.44rem
	  padding:.1rem
	  box-sizing:border-box
	  .icon-img-content
	    height:100%
	    display:block
	    margin:0 auto
	.icon-desc
	  position:absolute
	  left:0
	  right:0
	  bottom:0
	  height:.44rem
	  line-height:.44rem
	  text-align:center
	  color:$darkTextColor
	  ellipsis()
</style>